<template>
  <div class="mod-config" style="margin-left: 15px;margin-top: 16px;">

    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.keyword" placeholder="用户名/姓名/手机号" clearable />
      </el-form-item>

      <el-form-item label="操作时间">
        <el-date-picker
          v-model="createTimes"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="margin-right: 10px;width: 100%;"
        />
      </el-form-item>

      <el-form-item>
        <el-button v-if="hasAuth('btn:user:list')" @click="getDataList()">查询</el-button>
        <el-button v-if="hasAuth('btn:user:add')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
        <el-button
          v-if="hasAuth('btn:user:remove')"
          :disabled="dataListSelections.length <= 0"
          type="danger"
          @click="deleteHandle()"
        >批量删除</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="dataList"
      border
      style="width: 99%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" header-align="center" align="center" width="50" />

      <el-table-column prop="username" header-align="center" align="center" label="用户名" />

      <el-table-column prop="name" header-align="center" align="center" label="姓名" />

      <el-table-column prop="phone" header-align="center" align="center" label="手机" />

      <el-table-column prop="deptName" header-align="center" align="center" label="部门" />

      <el-table-column prop="postName" header-align="center" align="center" label="岗位" />

      <el-table-column prop="status" header-align="center" align="center" label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :disabled="hasAuth('btn:user:enable') == false"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="activeOrInActiveById(scope.row)"
          />
        </template>
      </el-table-column>

      <el-table-column prop="createTime" header-align="center" align="center" label="创建时间" />

      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="hasAuth('btn:user:update')"
            type="primary"
            size="small"
            icon="el-icon-edit"
            title="编辑"
            @click="addOrUpdateHandle(scope.row.id)"
          />

          <el-button
            v-if="hasAuth('btn:role:assignRole')"
            type="warning"
            size="small"
            icon="el-icon-s-operation"
            title="分配角色"
            @click="roleAssignHandle(scope.row.id, scope.row.username)"
          />

          <el-button
            v-if="hasAuth('btn:user:remove')"
            type="danger"
            size="small"
            icon="el-icon-delete"
            title="删除"
            @click="deleteHandle(scope.row.id)"
          />
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalCount"
      style="padding: 30px 0; text-align: center;"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
    <!-- 分配角色弹窗 -->
    <role-assign v-if="assignRolesVisible" ref="roleAssign" @refreshDataList="getDataList" />
  </div>
</template>

<script>
import AddOrUpdate from './user-add-or-update'
import RoleAssign from './user-role-assign'
import api from '@/api/system/user'
export default {
  components: {
    AddOrUpdate,
    RoleAssign
  },
  data() {
    return {
      dataForm: {
        keyword: ''
      },
      // 创建时间
      createTimes: [],
      // 数据列表
      dataList: [],
      // 当前页码
      currentPage: 1,
      // 每页记录数
      pageSize: 10,
      // 总页数
      totalPage: 0,
      // 总记录数
      totalCount: 0,
      // 是否显示"等待数据显示"动画
      listLoading: false,
      // 选中行数组
      dataListSelections: [],
      // 是否显示添加或修改弹窗
      addOrUpdateVisible: false,
      // 分配角色弹窗
      assignRolesVisible: false
    }
  },
  // 页面渲染前调用
  created() {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.listLoading = true
      // 开始时间
      let createTimeBegin
      // 结束时间
      let createTimeEnd
      if (this.createTimes && this.createTimes.length === 2) {
        createTimeBegin = this.createTimes[0]
        createTimeEnd = this.createTimes[1]
      }

      api.getDataList({
        'page': this.currentPage,
        'limit': this.pageSize,
        'keyword': this.dataForm.keyword,
        'createTimeBegin': createTimeBegin,
        'createTimeEnd': createTimeEnd
      }).then(res => {
        this.currentPage = res.data.currPage
        this.pageSize = res.data.pageSize
        this.totalCount = res.data.totalCount
        this.totalPage = res.data.totalPage
        this.dataList = res.data.records
        this.listLoading = false
      })
    },
    // 每页数
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getDataList()
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },
    // 多选
    handleSelectionChange(val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`是否对 [用户id=${ids.join(',')}] 进行 [${id ? '删除' : '批量删除'}] 操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.deleteByIds(ids).then(res => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.currentPage = 1
              this.getDataList()
            }
          })
        })
      })
    },
    // 启用或禁用
    activeOrInActiveById(row) {
      api.enableOrDisable(row.id, row.status).then(res => {
        this.$message({
          type: 'success',
          message: res.msg
        })
      })
    },
    // 角色分配
    roleAssignHandle(id, username) {
      // 显示弹窗
      this.assignRolesVisible = true
      this.$nextTick(() => {
        this.$refs.roleAssign.getRolesByUserId(id, username)
      })
    }
  }
}
</script>
